/** @format */

import { ref, onMounted, onUnmounted } from 'vue';

export interface ContainerState {
  isPC: boolean;
  isMobile: boolean;
  less1440: boolean;
}

export default function useContainer() {
  const theDeviceType = ref<ContainerState>({
    isPC: true,
    isMobile: false,
    less1440: false,
  });

  // 判断设备类型的阈值
  const MOBILE_BREAKPOINT = 768;

  // 更新容器状态
  const updateContainer = () => {
    const width = window.innerWidth;
    // 根据屏幕宽度和设备类型判断
    theDeviceType.value = {
      isPC: width >= MOBILE_BREAKPOINT,
      isMobile: width < MOBILE_BREAKPOINT,
      less1440: width < 1440,
    };
  };

  // 监听窗口大小变化
  const handleResize = () => {
    updateContainer();
  };

  onMounted(() => {
    updateContainer();
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  return {
    theDeviceType,
  };
}
